import router from "@/router/permission";
// import { RouteType } from '@/types/router'
import { defineStore } from "pinia";
// import { ToPotional } from '@/types/index'
// import { getLocalStorage, setLocalStorage } from '@Tea/utils'

export type ActiveType = {
  name: string;
  title: string;
};

type mainMenu = {
  pName: string;
  pTitle: string;
};

interface StoreState {
  activeList: (ActiveType & mainMenu)[];
  appRoute: any;
  keepAliveList: string[];
  defaultAvtive: ActiveType;
}

export default defineStore("routerStore", {
  state: (): StoreState => {
    return {
      activeList: [],
      appRoute: {} as any,
      defaultAvtive: {} as ActiveType,
      keepAliveList: [],
    };
  },
  getters: {
    activeParent: (state) => state.activeList[0],
    activeChildList: (state) => state.activeList.slice(1),
  },
  actions: {
    /**
     * @vuse 改变路由
     * @param data 包含当前路由，还有它的顶级父级路由
     */
    changeTargetRoute(data: any): void {
      const { name, title, pName = name, pTitle = title } = data;
      // 第一个面包屑为左边的菜单栏，只有当路由不是左边菜单时才添加至面包屑
      if (!this.activeList.some((el) => el.name === name) && pName !== name) {
        this.activeList.push({
          name,
          title,
          pName,
          pTitle,
        });

        // 添加缓存
        this.keepAliveList.push(name);

        // 保存路由
        this.saveRoute();
      }

      this.defaultAvtive.name = name;
      this.defaultAvtive.title = title;

      this.activeList[0].name = pName;
      this.activeList[0].title = pTitle;
    },
    /**
     * @vuse 将路由保存在本地
     */
    saveRoute(): void {
      // setLocalStorage(`sq-targetRoute`, this.activeList)
      localStorage.setItem("sq-targetRoute", this.activeList);
    },
    /**
     * @vuse 刷新、登录时重建路由
     */
    initRoute() {
      // const activeList = getLocalStorage(`sq-targetRoute`) as (ActiveType &mainMenu)[]
      const activeList = localStorage.getItem("sq-targetRoute");

      if (activeList == undefined || activeList?.length == 0) {
        const atticRoute = this.getAtticRoute();
        this.activeList = [
          {
            name: atticRoute[0].code,
            title: atticRoute[0].title,
            pName: "",
            pTitle: "",
          },
        ];
      } else {
        this.activeList = activeList;

        // 将要缓存的路由重新添加
        for (let i = 1; i < activeList.length; i++) {
          this.keepAliveList.push(activeList[i].name);
        }
      }
    },
    /**
     * @vuse 点击删除 菜单路由
     * @param e 点击事件对象 ，阻止事件的冒泡，防止删除的同时，还进行路由跳转
     * @param index 点击的索引
     */
    deleteActive(e: MouseEvent, index: number) {
      this.activeList.splice(index + 1, 1);
      const length = this.activeList.length;
      if (length === 1) {
        router.push({ name: this.activeParent.name });
      } else {
        const targetIndex = this.activeList[index + 1]
          ? this.activeList[index + 1]
          : this.activeList[index];
        router.push({ name: targetIndex.name });
      }

      // 保存路由
      this.saveRoute();

      // 删除缓存目标
      this.keepAliveList.splice(index, 1);

      // 阻止点击事件的向下传递，防止点击删除时切换路由
      e.stopPropagation();
    },
    // 删除所有子标签
    clearAll() {
      this.keepAliveList = [];
      // 删除第一个以外的所有路由
      this.activeList.splice(1);
      this.saveRoute();
      router.push({ name: this.activeList[0].name });
    },
    getAtticRoute() {
      return this.appRoute.children;
    },
  },
});
